<template>
	<div class="rankingright">
		<div class="wrap">
			<div class="wrap-img">
				<img :src="SongData.coverImgUrl" alt="" />
				<span class="msk"></span>
			</div>
			<div class="wrap-info">
				<h2>{{ SongData.name }}</h2>
				<p><i></i>最近更新：{{ now }} （每天更新）</p>
				<div class="btns">
					<a href="javascript:;" class="addply" title="播放">
						<i><em class="ply"></em>播放</i>
					</a>
					<a
						href="javascript:;"
						@click="addMusicList"
						class="btni add"
						title="添加到播放列表"
					></a>
					<a href="javascript:;" class="btni btni-fav">
						<i>({{ SongData.subscribedCount }})</i>
					</a>
					<a href="javascript:;" class="btni btni-share">
						<i>({{ SongData.shareCount }})</i>
					</a>
					<a href="javascript:;" class="btni btni-dl">
						<i>下载</i>
					</a>
					<a href="javascript:;" class="btni btni-cmmt">
						<i>({{ SongData.commentCount }})</i>
					</a>
				</div>
			</div>
		</div>
		<div class="wrapList">
			<div class="title">
				<h3>歌曲列表</h3>
				<span class="sub"><span>100</span>首歌</span>
				<div class="more">播放：<strong class="">4923834368</strong>次</div>
			</div>
			<MusicList :musicList="musicList"></MusicList>
			<div class="comments">
				<div class="title">
					<h3>评论</h3>
					<span class="sub">共<span>211774</span>条评论</span>
				</div>
				<div class="comment">
					<div class="iptarea">
						<div class="img">
							<img src="@/image/111.jpg" alt="" />
						</div>
						<div class="flag">
							<div class="txtwrap">
								<textarea class="txt" placeholder="评论"></textarea>
							</div>
							<div class="btns">
								<i class="icn icn-1"></i>
								<i class="icn icn-2"></i>
								<a href="javascript:;" class="btn">评论</a>
								<span>140</span>
							</div>
							<div class="corr"></div>
						</div>
					</div>
					<ComList :playListId="playListId"></ComList>
					<div>分页器</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "RankingRight",
};
</script>

<script setup>
import { defineProps, onMounted, ref, watch, computed } from "vue";
import { useStore } from "vuex";
import { getSongLists } from "@/api/Recommended";
import dayjs from "dayjs";

import MusicList from "./MusicList";
import ComList from "./ComList";

const props = defineProps({
	id: {
		type: Number,
		required: true,
	},
});

const store = useStore();

const newMusicList = computed(() => store.state.app.musicList);
const SongData = ref({});
const musicList = ref([]);
const playListId = ref(0);
const id = ref(3);
const now = ref("");

const addMusicList = () => {
	const list = [];
	musicList.value.map((item) => {
		list.push(JSON.stringify(item.id));
	});
	const newList = [...newMusicList.value, ...list];
	const set = new Set(newList);
	store.dispatch("app/musiclist", [...set]);
};

watch(props, (newValue) => {
	id.value = newValue.id;
	GetSongList();
});

onMounted(() => {
	GetSongList();
});

const GetSongList = async () => {
	const data = await getSongLists(id.value);
	SongData.value = data.playlist;

	musicList.value = SongData.value.tracks;
	playListId.value = SongData.value.id;

	now.value = dayjs(SongData.value.updateTime).format("MM月DD日");
};
</script>

<style lang="less" scoped>
.rankingright {
	float: right;
	height: 100%;
	width: 740px;
	box-sizing: border-box;
	padding-bottom: 50px;
	background-color: #fff;
	border-left: 1px solid #d3d3d3;
	.wrap {
		display: flex;
		align-content: center;
		padding: 40px;
		.wrap-img {
			position: relative;
			width: 150px;
			height: 150px;
			padding: 3px;
			border: 1px solid #ccc;
			img {
				width: 100%;
				height: 100%;
			}
			.msk {
				position: absolute;
				width: 150px;
				height: 150px;
				top: 3px;
				left: 3px;
				background: url(@/image/coverall.png) no-repeat;
				background-position: -230px -380px;
			}
		}
		.wrap-info {
			margin-left: 40px;
			line-height: 35px;
			h2 {
				margin: 16px 0 4px;
				line-height: 24px;
				font-size: 20px;
				font-weight: normal;
			}
			p {
				margin: 9px 0 20px;
				i {
					width: 13px;
					height: 13px;
					margin-right: 5px;
					display: inline-block;
					overflow: hidden;
					vertical-align: middle;
					background: url(@/image/icon.png) no-repeat 0 9999px;
					background-position: -18px -682px;
				}
			}

			.btns {
				height: 31px;
				margin-bottom: 25px;
				overflow: hidden;
				.btni {
					float: left;
					height: 31px;
					line-height: 30px;
					padding: 0 5px 0 0;
					min-width: 23px;
					cursor: pointer;
					color: #333;
					text-decoration: none;
					font-family: simsun, \5b8b\4f53;
					background: url(@/image/button2.png) no-repeat 0 9999px;
					i {
						float: left;
						height: 31px;
						line-height: 30px;
						min-width: 23px;
						cursor: pointer;
						background: url(@/image/button2.png) no-repeat 0 9999px;
					}
				}
				.addply {
					display: inline-block;
					float: left;
					height: 31px;
					line-height: 31px;
					padding: 0 5px 0 0;
					color: #fff;
					vertical-align: top;
					text-align: center;
					white-space: nowrap;
					background: url(@/image/button2.png) no-repeat 0 9999px;
					background-position: right -428px;
					i {
						display: inline-block;
						height: 31px;
						line-height: 31px;
						padding: 0 7px 0 8px;
						background: url(@/image/button2.png) no-repeat 0 9999px;
						background-position: 0 -387px;
						overflow: hidden;
						em {
							float: left;
							width: 20px;
							height: 18px;
							margin: 6px 2px 2px 0;
							background: url(@/image/button2.png) no-repeat 0 9999px;
							background-position: 0 -1622px;
							overflow: hidden;
						}
					}
				}
				.add {
					width: 31px;
					margin-left: -3px;
					margin-right: 5px;
					padding-right: 0;
					background-position: 0 -1588px;
				}
				.btni-fav {
					background-position: right -1020px;
					margin-right: 6px;
					i {
						padding-right: 2px;
						padding-left: 28px;
						background-position: 0 -977px;
					}
				}
				.btni-share {
					background-position: right -1020px;
					margin-right: 6px;
					i {
						padding-right: 2px;
						padding-left: 28px;
						background-position: 0 -1225px;
					}
				}
				.btni-dl {
					margin-right: 6px;
					background-position: right -1020px;
					i {
						padding-right: 2px;
						padding-left: 28px;
						background-position: 0 -2761px;
					}
				}
				.btni-cmmt {
					margin-right: 6px;
					background-position: right -1020px;
					i {
						padding-right: 2px;
						padding-left: 28px;
						background-position: 0 -1465px;
					}
				}
			}
		}
	}
	.wrapList {
		padding: 0 30px 40px 40px;
		.title {
			height: 33px;
			overflow: hidden;
			border-bottom: 2px solid #c20c0c;
			h3 {
				float: left;
				font-size: 20px;
				line-height: 28px;
				font-weight: normal;
				font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
			}
			.sub {
				float: left;
				margin: 9px 0 0 20px;
				span {
					color: #666;
				}
			}
			.more {
				float: right;
				margin-top: 5px;
				strong {
					color: #c20c0c;
				}
			}
		}

		.comments {
			margin-top: 40px;
			.iptarea {
				margin-top: 20px;
				.img {
					float: left;
					width: 50px;
					height: 50px;
					margin-right: -100px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.flag {
					margin-left: 64px;
					position: relative;
					.txtwrap {
						padding-right: 14px;
						.txt {
							width: 100%;
							height: 50px;
							margin-right: -20px;
							padding: 5px 6px 6px;
							border: 1px solid #cdcdcd;
							border-radius: 2px;
							line-height: 19px;
							box-sizing: content-box;
							outline: none;
							font-size: 12px;
							color: #333;
							font-family: Arial, Helvetica, sans-serif;
							resize: none;
							overflow: auto;
						}
					}
					.corr {
						position: absolute;
						top: 14px;
						left: -5px;
						width: 8px;
						height: 8px;
						border: 1px solid #cdcdcd;
						border-right-color: transparent;
						border-top-color: transparent;
						background: #fff;
						transform: rotate(45deg);
					}

					.btns {
						overflow: hidden;
						padding-top: 10px;
						.icn {
							float: left;
							width: 18px;
							height: 18px;
							margin: 0px 10px 0 0;
							cursor: pointer;
							background: url(@/image/icon.png) no-repeat 0 9999px;
						}
						.icn-1 {
							background-position: -40px -490px;
						}
						.icn-2 {
							background-position: -60px -490px;
						}
						.btn {
							float: right;
							width: 46px;
							height: 25px;
							color: #fff;
							text-align: center;
							line-height: 25px;
							background: url(@/image/www.png) no-repeat 0 9999px;
							background-position: -84px -64px;
						}
						span {
							float: right;
							margin-right: 10px;
							line-height: 25px;
						}
					}
				}
			}
		}
	}
}
</style>
